<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信阅读模拟器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#07C160',
                        secondary: '#8799A3',
                        accent: '#FF7D00',
                        dark: '#1D2129',
                        'gray-light': '#F2F3F5',
                        'gray-medium': '#C9CDD4',
                        'gray-dark': '#86909C'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                        serif: ['Noto Serif SC', 'serif']
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.3s ease-in-out',
                        'slide-up': 'slideUp 0.3s ease-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .backdrop-blur {
                backdrop-filter: blur(8px);
            }
            .book-hover {
                transition: all 0.3s ease;
            }
            .book-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .page-turn {
                transition: transform 0.5s ease;
            }
            .reading-mode-sepia {
                background-color: #F5F0E1;
                color: #5C4033;
            }
            .reading-mode-night {
                background-color: #1A1A1A;
                color: #A9A9A9;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-light min-h-screen flex flex-col text-dark">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white/80 backdrop-blur shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-book-open text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">微信阅读模拟器</h1>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#bookshelf" class="font-medium hover:text-primary transition-colors">书架</a>
                <a href="#discover" class="font-medium hover:text-primary transition-colors">发现</a>
                <a href="#categories" class="font-medium hover:text-primary transition-colors">分类</a>
                <a href="#mine" class="font-medium hover:text-primary transition-colors">我的</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <button id="search-btn" class="text-dark hover:text-primary">
                    <i class="fa-solid fa-search text-xl"></i>
                </button>
                <button id="upload-btn" class="flex items-center space-x-1 px-3 py-1.5 bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors">
                    <i class="fa-solid fa-upload"></i>
                    <span>上传</span>
                </button>
                <button id="menu-toggle" class="md:hidden text-dark hover:text-primary">
                    <i class="fa-solid fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white border-t animate-fade-in">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#bookshelf" class="py-2 px-3 hover:bg-gray-light rounded-lg transition-colors">书架</a>
                <a href="#discover" class="py-2 px-3 hover:bg-gray-light rounded-lg transition-colors">发现</a>
                <a href="#categories" class="py-2 px-3 hover:bg-gray-light rounded-lg transition-colors">分类</a>
                <a href="#mine" class="py-2 px-3 hover:bg-gray-light rounded-lg transition-colors">我的</a>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 正在阅读 -->
        <section class="mb-10">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold">正在阅读</h2>
                <button id="continue-reading" class="text-primary hover:underline">继续阅读</button>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="flex flex-col md:flex-row">
                    <div class="md:w-1/3 p-6 flex justify-center">
                        <img src="https://picsum.photos/seed/book1/300/400" alt="正在阅读的书籍" class="w-48 h-64 object-cover rounded-lg shadow-lg">
                    </div>
                    <div class="md:w-2/3 p-6 flex flex-col justify-center">
                        <h3 class="text-xl font-bold mb-2">活着</h3>
                        <p class="text-gray-dark mb-3">余华</p>
                        <div class="flex items-center mb-4">
                            <div class="flex text-yellow-400">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star-half-stroke"></i>
                            </div>
                            <span class="ml-2 text-gray-dark">4.8 (2,543人评价)</span>
                        </div>
                        <p class="text-gray-dark mb-4 line-clamp-3">讲述了在大时代背景下，主人公徐福贵的人生和家庭不断经受着苦难，到了最后，所有亲人都先后离他而去，仅剩下年老的他和一头老牛相依为命的故事。</p>
                        <div class="flex items-center space-x-2 mb-4">
                            <span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">文学</span>
                            <span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">经典</span>
                            <span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">小说</span>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div>
                                <p class="text-gray-dark text-sm">阅读进度</p>
                                <div class="flex items-center mt-1">
                                    <div class="w-32 bg-gray-light rounded-full h-1.5">
                                        <div class="bg-primary h-1.5 rounded-full" style="width: 35%"></div>
                                    </div>
                                    <span class="ml-2 text-sm">35%</span>
                                </div>
                            </div>
                            <div>
                                <p class="text-gray-dark text-sm">上次阅读</p>
                                <p class="text-sm">今天 14:30</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 书架 -->
        <section id="bookshelf" class="mb-10">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold">我的书架</h2>
                <div class="flex items-center space-x-2">
                    <button id="grid-view" class="p-2 bg-primary text-white rounded-md">
                        <i class="fa-solid fa-th-large"></i>
                    </button>
                    <button id="list-view" class="p-2 bg-gray-light hover:bg-gray-medium text-dark rounded-md transition-colors">
                        <i class="fa-solid fa-list"></i>
                    </button>
                </div>
            </div>
            
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                <!-- 示例书籍 -->
                <div class="book-hover bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer" onclick="openReader('活着', '余华', 'https://picsum.photos/seed/book1/300/400', 'fiction')">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/book1/300/400" alt="书籍封面" class="w-full h-48 object-cover">
                        <div class="absolute top-2 right-2">
                            <span class="px-2 py-1 bg-primary text-white text-xs rounded">txt</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium truncate">活着</h3>
                        <p class="text-gray-dark text-sm truncate">余华</p>
                    </div>
                </div>
                
                <div class="book-hover bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer" onclick="openReader('围城', '钱钟书', 'https://picsum.photos/seed/book2/300/400', 'fiction')">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/book2/300/400" alt="书籍封面" class="w-full h-48 object-cover">
                        <div class="absolute top-2 right-2">
                            <span class="px-2 py-1 bg-primary text-white text-xs rounded">txt</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium truncate">围城</h3>
                        <p class="text-gray-dark text-sm truncate">钱钟书</p>
                    </div>
                </div>
                
                <div class="book-hover bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer" onclick="openReader('三体', '刘慈欣', 'https://picsum.photos/seed/book3/300/400', 'science-fiction')">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/book3/300/400" alt="书籍封面" class="w-full h-48 object-cover">
                        <div class="absolute top-2 right-2">
                            <span class="px-2 py-1 bg-primary text-white text-xs rounded">pdf</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium truncate">三体</h3>
                        <p class="text-gray-dark text-sm truncate">刘慈欣</p>
                    </div>
                </div>
                
                <div class="book-hover bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer" onclick="openReader('平凡的世界', '路遥', 'https://picsum.photos/seed/book4/300/400', 'fiction')">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/book4/300/400" alt="书籍封面" class="w-full h-48 object-cover">
                        <div class="absolute top-2 right-2">
                            <span class="px-2 py-1 bg-primary text-white text-xs rounded">txt</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium truncate">平凡的世界</h3>
                        <p class="text-gray-dark text-sm truncate">路遥</p>
                    </div>
                </div>
                
                <div class="book-hover bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer" onclick="openReader('百年孤独', '加西亚·马尔克斯', 'https://picsum.photos/seed/book5/300/400', 'fiction')">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/book5/300/400" alt="书籍封面" class="w-full h-48 object-cover">
                        <div class="absolute top-2 right-2">
                            <span class="px-2 py-1 bg-primary text-white text-xs rounded">pdf</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium truncate">百年孤独</h3>
                        <p class="text-gray-dark text-sm truncate">加西亚·马尔克斯</p>
                    </div>
                </div>
                
                <div class="book-hover bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer" onclick="openReader('老人与海', '欧内斯特·海明威', 'https://picsum.photos/seed/book6/300/400', 'fiction')">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/book6/300/400" alt="书籍封面" class="w-full h-48 object-cover">
                        <div class="absolute top-2 right-2">
                            <span class="px-2 py-1 bg-primary text-white text-xs rounded">txt</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium truncate">老人与海</h3>
                        <p class="text-gray-dark text-sm truncate">欧内斯特·海明威</p>
                    </div>
                </div>
                
                <div class="book-hover bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer" onclick="openReader('红楼梦', '曹雪芹', 'https://picsum.photos/seed/book7/300/400', 'fiction')">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/book7/300/400" alt="书籍封面" class="w-full h-48 object-cover">
                        <div class="absolute top-2 right-2">
                            <span class="px-2 py-1 bg-primary text-white text-xs rounded">txt</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium truncate">红楼梦</h3>
                        <p class="text-gray-dark text-sm truncate">曹雪芹</p>
                    </div>
                </div>
                
                <div class="book-hover bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer" onclick="openReader('呐喊', '鲁迅', 'https://picsum.photos/seed/book8/300/400', 'fiction')">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/book8/300/400" alt="书籍封面" class="w-full h-48 object-cover">
                        <div class="absolute top-2 right-2">
                            <span class="px-2 py-1 bg-primary text-white text-xs rounded">pdf</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium truncate">呐喊</h3>
                        <p class="text-gray-dark text-sm truncate">鲁迅</p>
                    </div>
                </div>
                
                <div class="book-hover bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer" onclick="openReader('飘', '玛格丽特·米切尔', 'https://picsum.photos/seed/book9/300/400', 'fiction')">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/book9/300/400" alt="书籍封面" class="w-full h-48 object-cover">
                        <div class="absolute top-2 right-2">
                            <span class="px-2 py-1 bg-primary text-white text-xs rounded">txt</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium truncate">飘</h3>
                        <p class="text-gray-dark text-sm truncate">玛格丽特·米切尔</p>
                    </div>
                </div>
                
                <div class="book-hover bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="flex items-center justify-center h-48 bg-gray-light">
                        <button class="w-16 h-16 rounded-full bg-white border-2 border-dashed border-gray-medium flex items-center justify-center text-gray-dark hover:text-primary hover:border-primary transition-colors">
                            <i class="fa-solid fa-plus text-2xl"></i>
                        </button>
                    </div>
                    <div class="p-3 text-center">
                        <h3 class="font-medium text-gray-dark">添加书籍</h3>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 发现好书 -->
        <section id="discover" class="mb-10">
            <h2 class="text-xl font-bold mb-4">发现好书</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 推荐阅读 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="px-5 py-3 bg-primary/10 border-b border-primary/20">
                        <h3 class="font-semibold text-primary">推荐阅读</h3>
                    </div>
                    <div class="p-4">
                        <div class="space-y-4">
                            <div class="flex items-start space-x-3 cursor-pointer" onclick="openReader('解忧杂货店', '东野圭吾', 'https://picsum.photos/seed/recommend1/100/140', 'fiction')">
                                <img src="https://picsum.photos/seed/recommend1/100/140" alt="推荐书籍" class="w-16 h-24 object-cover rounded">
                                <div class="flex-grow">
                                    <h4 class="font-medium">解忧杂货店</h4>
                                    <p class="text-gray-dark text-sm">东野圭吾</p>
                                    <div class="flex items-center mt-1">
                                        <div class="flex text-yellow-400 text-xs">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star-half-stroke"></i>
                                        </div>
                                        <span class="ml-1 text-gray-dark text-xs">4.7 (3,215人评价)</span>
                                    </div>
                                    <p class="text-gray-dark text-sm mt-1 line-clamp-2">现代人内心流失的东西，这家杂货店能帮你找回——</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3 cursor-pointer" onclick="openReader('人类简史：从动物到上帝', '尤瓦尔·赫拉利', 'https://picsum.photos/seed/recommend2/100/140', 'history')">
                                <img src="https://picsum.photos/seed/recommend2/100/140" alt="推荐书籍" class="w-16 h-24 object-cover rounded">
                                <div class="flex-grow">
                                    <h4 class="font-medium">人类简史：从动物到上帝</h4>
                                    <p class="text-gray-dark text-sm">尤瓦尔·赫拉利</p>
                                    <div class="flex items-center mt-1">
                                        <div class="flex text-yellow-400 text-xs">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                        </div>
                                        <span class="ml-1 text-gray-dark text-xs">4.9 (4,762人评价)</span>
                                    </div>
                                    <p class="text-gray-dark text-sm mt-1 line-clamp-2">十万年前，地球上至少有六种不同的人，但今日，世界舞台为什么只剩下了我们自己？</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3 cursor-pointer" onclick="openReader('三体：黑暗森林', '刘慈欣', 'https://picsum.photos/seed/recommend3/100/140', 'science-fiction')">
                                <img src="https://picsum.photos/seed/recommend3/100/140" alt="推荐书籍" class="w-16 h-24 object-cover rounded">
                                <div class="flex-grow">
                                    <h4 class="font-medium">三体：黑暗森林</h4>
                                    <p class="text-gray-dark text-sm">刘慈欣</p>
                                    <div class="flex items-center mt-1">
                                        <div class="flex text-yellow-400 text-xs">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                        </div>
                                        <span class="ml-1 text-gray-dark text-xs">4.9 (5,321人评价)</span>
                                    </div>
                                    <p class="text-gray-dark text-sm mt-1 line-clamp-2">三体人在利用科技锁死了地球人的科学之后，出动庞大的宇宙舰队直扑太阳系，面对地球文明前所未有的危局，人类将如何应战？</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 热门分类 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="px-5 py-3 bg-primary/10 border-b border-primary/20">
                        <h3 class="font-semibold text-primary">热门分类</h3>
                    </div>
                    <div class="p-4">
                        <div class="grid grid-cols-2 gap-3">
                            <div class="book-hover rounded-lg overflow-hidden relative cursor-pointer">
                                <img src="https://picsum.photos/seed/category1/300/200" alt="文学" class="w-full h-32 object-cover">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                                    <div class="p-3">
                                        <h4 class="text-white font-medium">文学小说</h4>
                                        <p class="text-white/80 text-xs">1,284 本书</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="book-hover rounded-lg overflow-hidden relative cursor-pointer">
                                <img src="https://picsum.photos/seed/category2/300/200" alt="历史" class="w-full h-32 object-cover">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                                    <div class="p-3">
                                        <h4 class="text-white font-medium">历史传记</h4>
                                        <p class="text-white/80 text-xs">956 本书</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="book-hover rounded-lg overflow-hidden relative cursor-pointer">
                                <img src="https://picsum.photos/seed/category3/300/200" alt="科技" class="w-full h-32 object-cover">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                                    <div class="p-3">
                                        <h4 class="text-white font-medium">科技科普</h4>
                                        <p class="text-white/80 text-xs">873 本书</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="book-hover rounded-lg overflow-hidden relative cursor-pointer">
                                <img src="https://picsum.photos/seed/category4/300/200" alt="心理学" class="w-full h-32 object-cover">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                                    <div class="p-3">
                                        <h4 class="text-white font-medium">心理学</h4>
                                        <p class="text-white/80 text-xs">742 本书</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 分类浏览 -->
        <section id="categories" class="mb-10">
            <h2 class="text-xl font-bold mb-4">分类浏览</h2>
            
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="p-4">
                    <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3">
                        <button class="py-2 px-3 bg-primary/10 text-primary rounded-lg text-sm hover:bg-primary/20 transition-colors">全部</button>
                        <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">文学小说</button>
                        <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">历史传记</button>
                        <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">科技科普</button>
                        <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">心理学</button>
                        <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">哲学宗教</button>
                        <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">经济管理</button>
                        <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">艺术设计</button>
                        <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">生活时尚</button>
                        <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">计算机</button>
                        <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">外语学习</button>
                        <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">工具书</button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-light py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center space-x-2 mb-4 md:mb-0">
                    <i class="fa-solid fa-book-open text-primary text-xl"></i>
                    <span class="font-semibold">微信阅读模拟器</span>
                </div>
                
                <div class="flex space-x-6 mb-4 md:mb-0">
                    <a href="#" class="text-gray-dark hover:text-primary transition-colors">关于我们</a>
                    <a href="#" class="text-gray-dark hover:text-primary transition-colors">使用帮助</a>
                    <a href="#" class="text-gray-dark hover:text-primary transition-colors">隐私政策</a>
                    <a href="#" class="text-gray-dark hover:text-primary transition-colors">联系我们</a>
                </div>
                
                <div class="flex space-x-4">
                    <a href="#" class="w-8 h-8 rounded-full bg-gray-light hover:bg-gray-medium flex items-center justify-center text-gray-dark transition-colors">
                        <i class="fa-brands fa-weibo"></i>
                    </a>
                    <a href="#" class="w-8 h-8 rounded-full bg-gray-light hover:bg-gray-medium flex items-center justify-center text-gray-dark transition-colors">
                        <i class="fa-brands fa-wechat"></i>
                    </a>
                    <a href="#" class="w-8 h-8 rounded-full bg-gray-light hover:bg-gray-medium flex items-center justify-center text-gray-dark transition-colors">
                        <i class="fa-brands fa-github"></i>
                    </a>
                </div>
            </div>
            
            <div class="mt-6 text-center text-gray-dark text-sm">
                <p>© 2023 微信阅读模拟器. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 阅读器模态框 -->
    <div id="reader-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black/90"></div>
        <div class="relative w-full max-w-4xl h-full flex flex-col">
            <!-- 阅读器顶部控制栏 -->
            <div id="reader-header" class="absolute top-0 left-0 right-0 p-4 bg-black/50 backdrop-blur-sm flex justify-between items-center text-white opacity-0 hover:opacity-100 transition-opacity">
                <button id="close-reader" class="hover:text-primary">
                    <i class="fa-solid fa-arrow-left"></i>
                </button>
                <div class="flex items-center space-x-4">
                    <button id="prev-page" class="hover:text-primary">
                        <i class="fa-solid fa-chevron-left"></i>
                    </button>
                    <span id="page-info">第 15 页 / 共 286 页</span>
                    <button id="next-page" class="hover:text-primary">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                </div>
                <div class="flex items-center space-x-4">
                    <button id="reader-settings" class="hover:text-primary">
                        <i class="fa-solid fa-sliders"></i>
                    </button>
                    <button id="bookmark-btn" class="hover:text-primary">
                        <i class="fa-solid fa-bookmark"></i>
                    </button>
                </div>
            </div>
            
            <!-- 阅读区域 -->
            <div id="reading-area" class="flex-grow overflow-auto p-8 font-serif bg-white page-turn">
                <h1 class="text-2xl font-bold text-center mb-6">活着</h1>
                <h2 class="text-xl font-semibold text-center mb-8">余华</h2>
                
                <p class="mb-4 text-lg leading-relaxed">我比现在年轻十岁的时候，获得了一个游手好闲的职业，去乡间收集民间歌谣。那时候，我是一个刚刚中学毕业的学生，整个县城都没有一所大学，我又没有办法继续读书，因此只能找到这样的工作来糊</p>
                <p class="mb-4 text-lg leading-relaxed">口。这个工作是县文化馆的同志帮忙找的，我父亲在我出去干活的第一天，就给我上了一课。他说：“这地方的苦，你是看不到的，谁要是熬不过这苦，谁就看不到甜。”我当时还不明白他的意思，以为他是在吓唬我。</p>
                <p class="mb-4 text-lg leading-relaxed">我父亲是县城里的医生，他在医院里有自己的办公室，整天坐在办公室里看报纸。我母亲是一个目不识丁的女人，她在家里整天忙忙碌碌，做饭、洗衣服、打扫卫生，还要照顾我们兄弟姐妹。我是家里最小的孩子，上面有两个哥哥和一个姐姐。</p>
                <p class="mb-4 text-lg leading-relaxed">我记得自己第一天出去干活，是跟着县文化馆的一位同志去的。我们坐了两个小时的汽车，然后又走了两个小时的山路，才来到了一个名叫徐家汇的小山村。这个小山村坐落在群山环抱之中，一条清澈的小溪从村边流过，溪边是一片片绿油油的稻田。</p>
                <p class="mb-4 text-lg leading-relaxed">我们在村里住了下来，开始收集民间歌谣。村里的人都很热情，他们给我们讲了很多关于他们的故事和传说。我记得有一个老人，他给我们讲了一个关于他自己的故事。他说他年轻时曾经参加过红军，后来因为受伤才回到了家乡。他说他现在虽然年纪大了，但是仍然记得当年参加红军时的情景。</p>
                <p class="mb-4 text-lg leading-relaxed">我在村里住了一个多月，收集了很多民间歌谣。这些歌谣都是村里的老人们口口相传下来的，他们用这些歌谣来表达自己的情感和思想。我把这些歌谣记录下来，整理成了一本小册子，交给了县文化馆的同志。</p>
                <p class="mb-4 text-lg leading-relaxed">从那以后，我就经常去乡间收集民间歌谣。我走了很多地方，见过很多人，也听过很多故事。这些经历让我对生活有了更深刻的认识，也让我更加珍惜现在的生活。</p>
                <p class="mb-4 text-lg leading-relaxed">多年以后，我成为了一名作家。我写了很多小说，其中有一部小说叫做《活着》。这部小说讲述了一个名叫福贵的老人的一生，他经历了很多苦难和挫折，但是仍然坚强地活着。我写这部小说的目的，就是想告诉人们，无论生活有多么艰难，我们都要坚强地活下去。</p>
                <p class="mb-4 text-lg leading-relaxed">因为在这个世界上，还有很多美好的东西值得我们去珍惜和追求。只要我们活着，就有希望。只要我们有希望，就有勇气去面对生活中的一切困难和挫折。</p>
                <p class="mb-4 text-lg leading-relaxed">这就是我对生活的理解，也是我写作的初衷。我希望我的小说能够给读者带来一些启示和思考，让他们更加珍惜现在的生活，更加勇敢地面对未来的挑战。</p>
            </div>
            
            <!-- PDF 阅读区域（默认隐藏） -->
            <div id="pdf-reading-area" class="flex-grow overflow-auto hidden">
                <div id="pdf-viewer" class="w-full h-full"></div>
            </div>
            
            <!-- 阅读器底部控制栏 -->
            <div id="reader-footer" class="absolute bottom-0 left-0 right-0 p-4 bg-black/50 backdrop-blur-sm flex justify-between items-center text-white opacity-0 hover:opacity-100 transition-opacity">
                <div class="flex items-center space-x-4">
                    <button id="decrease-font" class="hover:text-primary">
                        <i class="fa-solid fa-font text-sm"></i>
                    </button>
                    <button id="increase-font" class="hover:text-primary">
                        <i class="fa-solid fa-font text-lg"></i>
                    </button>
                </div>
                <div class="flex items-center space-x-4">
                    <button id="reading-mode" class="hover:text-primary">
                        <i class="fa-solid fa-sun"></i>
                    </button>
                    <button id="show-toc" class="hover:text-primary">
                        <i class="fa-solid fa-list"></i>
                    </button>
                    <button id="search-in-book" class="hover:text-primary">
                        <i class="fa-solid fa-search"></i>
                    </button>
                </div>
                <div>
                    <button id="share-book" class="hover:text-primary">
                        <i class="fa-solid fa-share-alt"></i>
                    </button>
                </div>
            </div>
            
            <!-- 阅读设置面板 -->
            <div id="settings-panel" class="absolute bottom-0 left-0 right-0 bg-white rounded-t-xl shadow-lg transform translate-y-full transition-transform duration-300 p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-semibold">阅读设置</h3>
                    <button id="close-settings" class="text-gray-dark hover:text-primary">
                        <i class="fa-solid fa-times"></i>
                    </button>
                </div>
                
                <div class="space-y-6">
                    <div>
                        <h4 class="text-sm font-medium mb-2">字体大小</h4>
                        <div class="flex items-center space-x-4">
                            <button id="font-size-decrease" class="w-8 h-8 rounded-full bg-gray-light hover:bg-gray-medium flex items-center justify-center">
                                <i class="fa-solid fa-font text-sm"></i>
                            </button>
                            <div class="flex-grow">
                                <input type="range" id="font-size-slider" min="14" max="24" value="18" class="w-full h-2 bg-gray-light rounded-lg appearance-none cursor-pointer">
                            </div>
                            <button id="font-size-increase" class="w-8 h-8 rounded-full bg-gray-light hover:bg-gray-medium flex items-center justify-center">
                                <i class="fa-solid fa-font text-lg"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="text-sm font-medium mb-2">行间距</h4>
                        <div class="flex items-center space-x-4">
                            <button id="line-height-decrease" class="w-8 h-8 rounded-full bg-gray-light hover:bg-gray-medium flex items-center justify-center">
                                <i class="fa-solid fa-text-height"></i>
                            </button>
                            <div class="flex-grow">
                                <input type="range" id="line-height-slider" min="1" max="2" step="0.1" value="1.5" class="w-full h-2 bg-gray-light rounded-lg appearance-none cursor-pointer">
                            </div>
                            <button id="line-height-increase" class="w-8 h-8 rounded-full bg-gray-light hover:bg-gray-medium flex items-center justify-center">
                                <i class="fa-solid fa-text-height"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="text-sm font-medium mb-2">阅读主题</h4>
                        <div class="flex space-x-3">
                            <button class="w-10 h-10 rounded-full bg-white border-2 border-primary flex items-center justify-center" data-mode="normal">
                                <i class="fa-solid fa-check"></i>
                            </button>
                            <button class="w-10 h-10 rounded-full bg-[#F5F0E1] border-2 border-transparent hover:border-primary" data-mode="sepia"></button>
                            <button class="w-10 h-10 rounded-full bg-[#1A1A1A] border-2 border-transparent hover:border-primary" data-mode="night"></button>
                            <button class="w-10 h-10 rounded-full bg-[#2D3748] border-2 border-transparent hover:border-primary" data-mode="dark-blue"></button>
                            <button class="w-10 h-10 rounded-full bg-[#2F3136] border-2 border-transparent hover:border-primary" data-mode="discord"></button>
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="text-sm font-medium mb-2">翻页效果</h4>
                        <div class="grid grid-cols-3 gap-3">
                            <button class="py-2 px-3 bg-primary/10 text-primary rounded-lg text-sm hover:bg-primary/20 transition-colors">平滑</button>
                            <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">仿真</button>
                            <button class="py-2 px-3 bg-gray-light text-dark rounded-lg text-sm hover:bg-gray-medium transition-colors">无</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 上传文件模态框 -->
    <div id="upload-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
        <div class="relative bg-white rounded-xl shadow-lg max-w-md w-full animate-fade-in">
            <div class="p-5">
                <h3 class="font-semibold text-lg mb-4">上传电子书</h3>
                
                <div class="space-y-4">
                    <div class="border-2 border-dashed border-gray-medium rounded-lg p-6 text-center hover:border-primary transition-colors">
                        <input type="file" id="file-upload" class="hidden" accept=".txt,.pdf,.epub,.mobi">
                        <label for="file-upload" class="cursor-pointer">
                            <i class="fa-solid fa-cloud-upload-alt text-3xl text-gray-dark mb-2"></i>
                            <p class="mb-1">点击或拖拽文件到这里</p>
                            <p class="text-xs text-gray-dark">支持 TXT, PDF, EPUB, MOBI 格式</p>
                        </label>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium mb-2">书名</label>
                        <input type="text" placeholder="请输入书名" class="w-full px-4 py-2 rounded-lg border border-gray-medium focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium mb-2">作者</label>
                        <input type="text" placeholder="请输入作者" class="w-full px-4 py-2 rounded-lg border border-gray-medium focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium mb-2">分类</label>
                        <select class="w-full px-4 py-2 rounded-lg border border-gray-medium focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="">请选择分类</option>
                            <option value="literature">文学小说</option>
                            <option value="history">历史传记</option>
                            <option value="science">科技科普</option>
                            <option value="psychology">心理学</option>
                            <option value="philosophy">哲学宗教</option>
                            <option value="economy">经济管理</option>
                            <option value="art">艺术设计</option>
                            <option value="life">生活时尚</option>
                        </select>
                    </div>
                    
                    <div class="flex space-x-3">
                        <button id="cancel-upload" class="flex-grow py-2 px-4 bg-gray-light text-dark rounded-lg hover:bg-gray-medium transition-colors">取消</button>
                        <button id="confirm-upload" class="flex-grow py-2 px-4 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">上传</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 电子书数据
        const books = [
            { title: "活着", author: "余华", cover: "https://picsum.photos/seed/book1/300/400", type: "txt", category: "fiction" },
            { title: "围城", author: "钱钟书", cover: "https://picsum.photos/seed/book2/300/400", type: "txt", category: "fiction" },
            { title: "三体", author: "刘慈欣", cover: "https://picsum.photos/seed/book3/300/400", type: "pdf", category: "science-fiction" },
            { title: "平凡的世界", author: "路遥", cover: "https://picsum.photos/seed/book4/300/400", type: "txt", category: "fiction" },
            { title: "百年孤独", author: "加西亚·马尔克斯", cover: "https://picsum.photos/seed/book5/300/400", type: "pdf", category: "fiction" },
            { title: "老人与海", author: "欧内斯特·海明威", cover: "https://picsum.photos/seed/book6/300/400", type: "txt", category: "fiction" },
            { title: "红楼梦", author: "曹雪芹", cover: "https://picsum.photos/seed/book7/300/400", type: "txt", category: "fiction" },
            { title: "呐喊", author: "鲁迅", cover: "https://picsum.photos/seed/book8/300/400", type: "pdf", category: "fiction" },
            { title: "飘", author: "玛格丽特·米切尔", cover: "https://picsum.photos/seed/book9/300/400", type: "txt", category: "fiction" },
        ];
        
        // 当前阅读的书籍
        let currentBook = null;
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化菜单切换
            document.getElementById('menu-toggle').addEventListener('click', function() {
                document.getElementById('mobile-menu').classList.toggle('hidden');
            });
            
            // 初始化继续阅读按钮
            document.getElementById('continue-reading').addEventListener('click', function() {
                openReader("活着", "余华", "https://picsum.photos/seed/book1/300/400", "fiction");
            });
            
            // 初始化阅读器相关按钮
            document.getElementById('close-reader').addEventListener('click', closeReader);
            document.getElementById('reader-settings').addEventListener('click', toggleSettingsPanel);
            document.getElementById('close-settings').addEventListener('click', toggleSettingsPanel);
            
            // 初始化阅读设置相关
            document.getElementById('font-size-decrease').addEventListener('click', decreaseFontSize);
            document.getElementById('font-size-increase').addEventListener('click', increaseFontSize);
            document.getElementById('font-size-slider').addEventListener('input', updateFontSize);
            
            document.getElementById('line-height-decrease').addEventListener('click', decreaseLineHeight);
            document.getElementById('line-height-increase').addEventListener('click', increaseLineHeight);
            document.getElementById('line-height-slider').addEventListener('input', updateLineHeight);
            
            // 初始化阅读主题切换
            document.querySelectorAll('[data-mode]').forEach(button => {
                button.addEventListener('click', function() {
                    setReadingMode(this.getAttribute('data-mode'));
                    
                    // 更新选中状态
                    document.querySelectorAll('[data-mode]').forEach(btn => {
                        btn.classList.remove('border-primary');
                        btn.classList.add('border-transparent');
                        btn.innerHTML = '';
                    });
                    
                    this.classList.remove('border-transparent');
                    this.classList.add('border-primary');
                    this.innerHTML = '<i class="fa-solid fa-check"></i>';
                });
            });
            
            // 初始化上传模态框
            document.getElementById('upload-btn').addEventListener('click', function() {
                document.getElementById('upload-modal').classList.remove('hidden');
            });
            
            document.getElementById('cancel-upload').addEventListener('click', function() {
                document.getElementById('upload-modal').classList.add('hidden');
            });
            
            document.getElementById('confirm-upload').addEventListener('click', function() {
                // 模拟上传成功
                document.getElementById('upload-modal').classList.add('hidden');
                showToast('上传成功');
            });
            
            // 初始化阅读模式切换
            document.getElementById('reading-mode').addEventListener('click', toggleReadingMode);
            
            // 初始化PDF.js
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
        });
        
        // 打开阅读器
        function openReader(title, author, cover, category) {
            currentBook = { title, author, cover, category };
            
            // 设置阅读区域的标题和作者
            document.getElementById('reading-area').querySelector('h1').textContent = title;
            document.getElementById('reading-area').querySelector('h2').textContent = author;
            
            // 显示阅读器模态框
            document.getElementById('reader-modal').classList.remove('hidden');
            
            // 模拟加载效果
            setTimeout(() => {
                document.getElementById('reading-area').style.opacity = '1';
            }, 300);
        }
        
        // 关闭阅读器
        function closeReader() {
            document.getElementById('reading-area').style.opacity = '0';
            
            setTimeout(() => {
                document.getElementById('reader-modal').classList.add('hidden');
                currentBook = null;
            }, 300);
        }
        
        // 切换设置面板
        function toggleSettingsPanel() {
            const panel = document.getElementById('settings-panel');
            if (panel.classList.contains('translate-y-full')) {
                panel.classList.remove('translate-y-full');
            } else {
                panel.classList.add('translate-y-full');
            }
        }
        
        // 调整字体大小
        function decreaseFontSize() {
            const slider = document.getElementById('font-size-slider');
            slider.value = Math.max(parseInt(slider.value) - 1, parseInt(slider.min));
            updateFontSize();
        }
        
        function increaseFontSize() {
            const slider = document.getElementById('font-size-slider');
            slider.value = Math.min(parseInt(slider.value) + 1, parseInt(slider.max));
            updateFontSize();
        }
        
        function updateFontSize() {
            const size = document.getElementById('font-size-slider').value;
            document.getElementById('reading-area').style.fontSize = `${size}px`;
        }
        
        // 调整行间距
        function decreaseLineHeight() {
            const slider = document.getElementById('line-height-slider');
            slider.value = Math.max(parseFloat(slider.value) - 0.1, parseFloat(slider.min));
            updateLineHeight();
        }
        
        function increaseLineHeight() {
            const slider = document.getElementById('line-height-slider');
            slider.value = Math.min(parseFloat(slider.value) + 0.1, parseFloat(slider.max));
            updateLineHeight();
        }
        
        function updateLineHeight() {
            const height = document.getElementById('line-height-slider').value;
            document.getElementById('reading-area').style.lineHeight = height;
        }
        
        // 设置阅读模式
        function setReadingMode(mode) {
            const readingArea = document.getElementById('reading-area');
            
            // 移除所有模式类
            readingArea.classList.remove('reading-mode-sepia', 'reading-mode-night');
            
            // 添加选中的模式类
            if (mode === 'sepia') {
                readingArea.classList.add('reading-mode-sepia');
            } else if (mode === 'night') {
                readingArea.classList.add('reading-mode-night');
            }
            
            // 更新阅读模式图标
            const modeBtn = document.getElementById('reading-mode');
            if (mode === 'night') {
                modeBtn.innerHTML = '<i class="fa-solid fa-moon"></i>';
            } else {
                modeBtn.innerHTML = '<i class="fa-solid fa-sun"></i>';
            }
        }
        
        // 切换阅读模式
        function toggleReadingMode() {
            const readingArea = document.getElementById('reading-area');
            
            if (readingArea.classList.contains('reading-mode-night')) {
                setReadingMode('normal');
            } else if (readingArea.classList.contains('reading-mode-sepia')) {
                setReadingMode('night');
            } else {
                setReadingMode('sepia');
            }
        }
        
        // 显示提示消息
        function showToast(message) {
            // 检查是否已存在toast元素
            let toast = document.getElementById('toast-message');
            
            if (!toast) {
                // 创建toast元素
                toast = document.createElement('div');
                toast.id = 'toast-message';
                toast.className = 'fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-dark text-white px-6 py-3 rounded-lg shadow-lg z-50 opacity-0 transition-opacity duration-300';
                document.body.appendChild(toast);
            }
            
            // 设置消息内容
            toast.textContent = message;
            
            // 显示toast
            setTimeout(() => {
                toast.classList.remove('opacity-0');
                toast.classList.add('opacity-100');
            }, 10);
            
            // 3秒后隐藏
            setTimeout(() => {
                toast.classList.remove('opacity-100');
                toast.classList.add('opacity-0');
            }, 3000);
        }
        
        // 模拟加载PDF文件
        function loadPDF(filePath) {
            // 显示PDF阅读区域，隐藏文本阅读区域
            document.getElementById('reading-area').classList.add('hidden');
            document.getElementById('pdf-reading-area').classList.remove('hidden');
            
            // 加载PDF
            const loadingTask = pdfjsLib.getDocument(filePath);
            loadingTask.promise.then(function(pdf) {
                console.log('PDF loaded');
                
                // 获取第一页
                pdf.getPage(1).then(function(page) {
                    console.log('Page loaded');
                    
                    const scale = 1.5;
                    const viewport = page.getViewport({ scale: scale });
                    
                    // 准备画布
                    const canvas = document.createElement('canvas');
                    const context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    
                    document.getElementById('pdf-viewer').appendChild(canvas);
                    
                    // 渲染页面
                    const renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    const renderTask = page.render(renderContext);
                    renderTask.promise.then(function() {
                        console.log('Page rendered');
                    });
                });
            }).catch(function(error) {
                console.error('Error loading PDF:', error);
                showToast('PDF加载失败');
            });
        }
    </script>
</body>
</html>
